@charset "UTF-8";

@import "../_components/variables.scss";
@import "../_components/_mixin.scss";
@import "../_components/reset.scss";

@function torem($px) {
    @return $px / 32 * 1rem;
}

.hide {
    display: none;
}

.Mhot-banner {
    height: torem(200);
    width: torem(750);
    background: url(/images/Mhot/MhotBanner.png) no-repeat;
    background-size: contain;
}

.tab-content {
    min-height: torem(182);
}

.tab-box {
    width: 100%;
    background-color: #fff;
    z-index: 1000;
}

.fixed {
    position: fixed;
    top: 0px;
    left: 0px;

    //background: rgba(255, 255, 255, 0.98);

    .tab, .sub-tab {
        box-shadow: none;
    }
}

.tab {
    height: torem(100);
    border-bottom: 1px solid #d0cfcf;
    box-shadow: 0 2px 2px #dcdbdb;
}

.tab-list {
    font-size: torem(28);
    width: 100%;
    display: table;
    line-height: torem(100);

    a {
        color: #666;
        border-bottom: torem(2) solid #fff;
        display: inline-block;
        line-height: torem(50);
        cursor: pointer;
    }

    & > .item {
        display: table-cell;
        text-align: center;
    }

    & > .item.cur {
        a {
            color: #eb1212;
            border-bottom-color: #eb1212;
        }
    }
}

.sub-tab {
    display: block;
    height: torem(82);
    border-bottom: 1px solid #c8c8c8;
    box-shadow: 0 3px 2px #c8c8c8;
    overflow: hidden;

    //a6a5a5
}

.sub-tab-cnt {
    height: torem(82);
    overflow: hidden;
    white-space: nowrap;
}

.sub-tab-list {
    font-size: torem(24);
    color: #333;
    line-height: torem(82);

    & > .item {
        font-family: 'microsoft yahei';
        display: inline-block;
        text-align: center;
        padding: 0 torem(32);
    }

    & > .item.cur {
        color: #eb1212;
    }
}

.content-list {
    margin-top: 3px;
    background-color: #dbdbdb;
    padding-top: 18px;
}

.product-list {
    margin-left: torem(10);

    @include clearfix;

    & > .item {
        width: 50%;
        height: torem(630);
        margin-bottom: torem(10);
        padding-right: torem(10);
        float: left;
    }
}

.product {
    height: 100%;
    width: 100%;
    background-color: #fff;

    .hd {
        height: torem(360);

        .img-cnt {
            width: 100%;
            height: 100%;
            background-image: url(http://static.jyh.ymatou.com/app/images/placeholder@200x200.1511131924.png);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
    }

    .bd {
        padding: torem(10);
        font-size: torem(26);
    }

    .country {
        color: #a3a3a3;
        line-height: torem(36);
    }

    .country-flag {
        width: torem(36);
        height: torem(36);
    }

    .p-title {
        margin: torem(15) 0;
        white-space: normal;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: torem(30);
        height: torem(60);
    }

    .p-original {
        color: #adadad;
        text-decoration: line-through;
        font-size: torem(25);
    }

    .p-btn {
        text-align: center;
        padding-left: torem(145);
        padding-right: torem(45);
        height: torem(70);
        line-height: torem(70);
        background: url(/images/Mhot/btn1.png) no-repeat;
        background-size: contain;
        margin: torem(10) torem(10);
        color: #fff;
        font-size: torem(28);

        .price {
            font-size: torem(38);
            vertical-align: top;
        }
    }
}

//加载更多
.load-more {
    display: none;
    text-align: center;
    font-size: torem(20);
    padding: torem(5) 0;
    font-family: 'microsoft yahei';
    color: #383838;
    vertical-align: middle;
}

.bowlG {
    position: relative;
    width: torem(20);
    height: torem(20);
    display: inline-block;
    vertical-align: middle;
    margin-right: torem(8);
}

.bowl_ringG {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #383838;
    border-radius: 50%;
}

.ball_holderG {
    position: absolute;
    width: 30%;
    height: 100%;
    left: 36%;
    top: 0px;
    animation-name: ball_moveG;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.ballG {
    position: absolute;
    left: 0px;
    top: -27%;
    width: 240%;
    height: 70%;
    background: #E8E8E8;
    border-radius: 50%;
}

@keyframes ball_moveG {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*loading效果*/
#ymtWrap {
    visibility: hidden;
}

.click-loading {
    z-index: 100;
    position: fixed;
    top: 50%;
    left: 50%;
    width: torem(160);
    height: torem(160);
    text-align: center;
    background: rgba(56, 56, 56, 0.8);
    margin-left: torem(-80);
    margin-top: torem(-80);
    border-radius: 1em;
}

.click-loading .loadtxt {
    color: #fff;
    font-weight: 500;
    font-family: 'Microsoft yahei';
    font-size: torem(20);
}

.click-loading .spinner {
    margin: torem(64) 0 0 50%;
    height: torem(50);
}

.click-loading .spinner > div {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    width: torem(20);
    height: torem(6);
    border-radius: 21em;
    -webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1);
    -webkit-transform: rotate(-5deg) translate(torem(20), 0);
    -webkit-animation: slides 1.3s infinite;
    -webkit-transform-origin: 0 50%;
}

.click-loading .spinner .rect2 {
    -webkit-transform: rotate(27deg) translate(torem(20), 0);
    -webkit-animation-delay: -1.2s;
}

.click-loading .spinner .rect3 {
    -webkit-transform: rotate(54deg) translate(torem(20), 0);
    -webkit-animation-delay: -1.1s;
}

.click-loading .spinner .rect4 {
    -webkit-transform: rotate(81deg) translate(torem(20), 0);
    -webkit-animation-delay: -1s;
}

.click-loading .spinner .rect5 {
    -webkit-transform: rotate(108deg) translate(torem(20), 0);
    -webkit-animation-delay: -0.9s;
}

.click-loading .spinner .rect6 {
    -webkit-transform: rotate(135deg) translate(torem(20), 0);
    -webkit-animation-delay: -0.8s;
}

.click-loading .spinner .rect7 {
    -webkit-transform: rotate(162deg) translate(torem(20), 0);
    -webkit-animation-delay: -0.7s;
}

.click-loading .spinner .rect8 {
    -webkit-transform: rotate(189deg) translate(torem(20), 0);
    -webkit-animation-delay: -0.6s;
}

.click-loading .spinner .rect9 {
    -webkit-transform: rotate(216deg) translate(torem(20), 0);
    -webkit-animation-delay: -0.5s;
}

.click-loading .spinner .rect10 {
    -webkit-transform: rotate(243deg) translate(torem(20), 0);
    -webkit-animation-delay: -0.4s;
}

.click-loading .spinner .rect11 {
    -webkit-transform: rotate(270deg) translate(torem(20), 0);
    -webkit-animation-delay: -0.3s;
}

.click-loading .spinner .rect12 {
    -webkit-transform: rotate(297deg) translate(torem(20), 0);
    -webkit-animation-delay: -0.2s;
}

.click-loading .spinner .rect13 {
    -webkit-transform: rotate(324deg) translate(torem(20), 0);
    -webkit-animation-delay: -0.1s;
}

@-webkit-keyframes slides {
    0% {
        background-color: rgba(255, 255, 255, 0.8);
    }

    100% {
        background-color: rgba(255, 255, 255, 0.3);
    }
}

@-webkit-keyframes stretchdelay {
    0% {
        background: rgba(0, 0, 0, 0.3);
    }

    100% {
        background: rgba(0, 0, 0, 0.08);
    }
}

/*动画*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.short {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        -ms-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        -ms-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        -ms-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        -ms-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        -ms-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-800px);
        transform: translateY(-800px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-800px);
        -ms-transform: translateY(-800px);
        transform: translateY(-800px);
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}